<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>if条件判断-VUE</title>
		<script src="../assets/js/vue.js"></script>
	</head>
	<body>
		<!-- v-if和v-show的区别：v-if关键在于是否渲染；v-show总是渲染，关键是否显示，用display属性控制
			 v-show不支持template元素，也不支持v-else
			 v-if有更高的切换开销，v-show有更高的初始渲染开销，
			 如果需要非常频繁的切换，使用v-show，如果条件很少改变，使用v-if比较好-->
		<!-- 另外v-if和v-for不能使用在同一个元素上 -->
		<div id="app">
			<span v-if="flag">if you can see me,the flag is true! or is false!</span>
			<div>
				<p v-if="world === 'A'">A</p>
				<!-- v-else-if：VUE2.1.0新增，必须跟在v-if或v-else-if之后 -->
				<p v-else-if="world === 'B'">B</p>
				<p v-else-if="world === 'C'">C</p>
				<p v-else>NOT A/B/C, other world!</p>
				<p v-show="isShow">hello v-show</p>
			</div>
			<!-- template标签不会被浏览器解析，可以当作不可见的包裹元素 -->
			<template v-if="templateFlag">
				<span>hello span</span>
				<p> hello p</p>
				<div>hello div</div>
			</template>
			<!-- VUE会尽可能高效渲染元素，故而会复用已有元素而不是从头渲染，一下情况不会清除用户已输入内容，而仅仅是替换了placeholder -->
			<!-- 如果要让VUE渲染引擎不复用元素，可以给元素添加唯一的key，表示两个元素完全独立，不添加key的label元素会继续复用 -->
			<template v-if="loginType === 'userName'">
				<label>用户名：</label>
				<input placeholder="请输入用户名" key="name-input" />
			</template>
			<template v-else>
				<label>邮箱：</label>
				<input placeholder="请输入邮箱" key='email-input' />
			</template>
			<br />
			<button @click="toggleLoginType">切换登陆方式</button>
		</div>
		<script src="../assets/js/if.js"></script>
	</body>
</html>
